<template>
        <div class="container">
          <div class="top-bar">
            <div class="top-logo">
              <img src="../../assets/Verification/pal  logo.png" alt="" />
            </div>
            <div class="top-left">
              <div class="s-pic">
                <img src="../../assets/Verification/phone.png" alt="" />
              </div>
              <div>
                <p>全国服务热线</p>
                <div class="phone">400-716-2588</div>
              </div>
            </div>
          </div>
          <div class="psword">
                欢迎注册SPF-Pal平台
          </div>
          <div class="progress-bar">
            <div class="step1">
              <div class="tu1">
                <img src="../../assets/Verification/1.png" alt="" />
                <div class="p1">账号注册</div>
              </div>
            </div>
            <div class="step2">
              <div class="tu2">
                <img src="../../assets/Verification/2.png" alt="" />
                <div class="p2">验证身份</div>
              </div>
            </div>
            <div class="step3">
              <div class="tu3">
                <img src="../../assets/Verification/3.png" alt="" />
                <div class="p3">设置新密码</div>
              </div>
            </div>
            <div class="step4">
              <div class="tu4">
                <img src="../../assets/Verification/4.png" alt="" />
                <div class="p4">完成</div>
              </div>
            </div>
          </div>
          <div class="form-box">
            <div><span>账户名：</span><input type="text" /></div>
            <div><span>验证码：</span><input type="text" /></div>
            <button type="submit" class="submit" @click="getSum()">提交</button>
          </div>
        </div>
      </template>
      <script>
          export default {
              data () {
                  return {
                  }
              },
              methods: {
                  getSum(){
                      console.log('ok')
                  }
              }
          }
      </script>
      <style lang="less" scoped>
        .container {
          float: left;
          height: 100%;
          background-color: #eff3f8;
          .top-bar {
            width: 1920px;
            height: 99px;
            background: rgba(242, 242, 242, 1);
            box-shadow: 0px 0px 16px 0px rgba(74, 74, 74, 0.5);
            .top-logo {
              padding-top: 28px;
              margin-left: 63px;
            }
            .top-left {
              /* width: 200px; */
              /* height: 42px; */
              margin-left: 1641px;
              margin-top: -46px;
              .s-pic {
                float: left;
                border: 1px dashed #aaa;
              }
              p {
                margin-left: 50px;
                font-size: 15px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: rgba(82, 82, 82, 1);
                line-height: 14px;
              }
              .phone {
                margin-left: 50px;
                font-size: 24px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: rgba(19, 120, 218, 1);
                line-height: 14px;
              }
            }
          }
          .psword {
            margin-top: 40px;
            margin-left: 209px;
            width: 193px;
            height: 18px;
            font-size: 19px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: rgba(85, 85, 85, 1);
            line-height: 20px;
          }
          .progress-bar {
            margin-left: 302px;
            margin-top: 52px;
            width: 1316px;
            height: 10px;
            background: rgba(215, 215, 215, 1);
            border-radius: 5px;
          }
          .step1 {
            position: relative;
            width: 327px;
            height: 10px;
            background: rgba(122, 189, 84, 1);
            border-radius: 5px;
            .tu1 {
              position: absolute;
              left: 140px;
              top: -14px;
              .p1 {
                position: absolute;
                left: -21px;
                top: 76px;
                width: 81px;
                height: 16px;
                font-size: 16px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: rgba(68, 150, 22, 1);
                line-height: 22px;
              }
            }
          }
          .step2 {
            position: relative;
            width: 327px;
            height: 10px;
            border-radius: 5px;
            .tu2 {
              position: absolute;
              left: 490px;
              top: -22px;
              .p2 {
                position: absolute;
                left: -11px;
                top: 76px;
                width: 66px;
                height: 16px;
                font-size: 16px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: rgba(182, 182, 182, 1);
                line-height: 22px;
              }
            }
          }
          .step3 {
            position: relative;
            width: 327px;
            height: 10px;
            border-radius: 5px;
            .tu3 {
              position: absolute;
              left: 820px;
              top: -34px;
              .p3 {
                position: absolute;
                left: -17px;
                top: 76px;
                width: 81px;
                height: 16px;
                font-size: 16px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: rgba(182, 182, 182, 1);
                line-height: 22px;
              }
            }
          }
          .step4 {
            position: relative;
            width: 327px;
            height: 10px;
            border-radius: 5px;
            .tu4 {
              position: absolute;
              left: 1110px;
              top: -44px;
              .p4 {
                position: absolute;
                left: 5px;
                top: 76px;
                width: 66px;
                height: 16px;
                font-size: 16px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: rgba(182, 182, 182, 1);
                line-height: 22px;
              }
            }
          }
          .form-box {
            margin-left: 585px;
            margin-top: 200px;
            width: 820px;
            height: 230px;
            span {
              width: 60px;
              height: 17px;
              font-size: 18px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              color: rgba(80, 80, 80, 1);
              line-height: 26px;
            }
            input {
              margin-top: 25px;
              width: 374px;
              height: 46px;
              background: rgba(255, 255, 255, 1);
              border-radius: 5px;
              border: none;
            }
            .submit {
              margin-top: 50px;
              margin-left: 71px;
              width: 187px;
              height: 46px;
              background: #39a4ff;
              border-radius: 5px;
              font-size: 18px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              color: rgba(255, 255, 255, 1);
              line-height: 26px;
              letter-spacing: 4px;
              border: none;
              cursor: pointer;
            }
          }
        }
      </style>
      